<template>
    <div class="invite">
        <headerBar :title="title"></headerBar>
        <div class="invite_main">
            <div class="g_card top">
              <div class="my_invite">
                    <div class="my-header">冬季活动!邀请好友!</div>
                    <div class="my-header-desc">每当一个好友使用了您的邀请码，您和您好友将各获得价值0.49元的宝石</div>
                    <input v-model="short_code_link" disabled placeholder="" class="invite_input code">
                    <div class="copy">
                        <div class="invite-result">邀请人数:&nbsp;&nbsp;<span class="invite-number">{{detail.pull_new_num}}</span></div>
                        <van-button size="small" id="copy" class="invite_comfirm">点我复制邀请链接</van-button>
                    </div>
                </div>
            </div>
            <div class="g_card top card-2">
                <div class="my-header-2">感恩回馈~限时补录</div>
                <div class="my-header-desc">若之前未使用好友邀请码注册，在下方输入来自好友的邀请码，可获得0.49宝石奖励</div>
                <input v-model="short_code" placeholder="推广码为四位随机码" class="invite_input">
                <div class="right-button" align="right">
                    <van-button size="small" @click="getInvite" class="invite_comfirm">获取奖励</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { getUserInfo,invite_code } from '@/apis/apis';
  import { mapState} from 'vuex'
  import headerBar from "@/components/headerBar";

  export default {
    components: {
      headerBar
    },
    data() {
      return {
        short_code: '',
        show: true,
        title: '推广中心',
        url:window.location.origin,
      };
    },
    computed:{
        ...mapState(['detail']),
        short_code_link() {
          return this.url + '/?invite_code=' + this.detail.short_code
        }
    },
    methods: {
      getUserInfo() {
        getUserInfo()
          .then(res => {
            this.userInfo = res;
          });
      },
      getInvite() {
        if (!this.short_code) {
          return this.$toast({
            message: '请先输入邀请码',
            position: 'bottom'
          });
        }
        invite_code(this.short_code)
          .then(res => {
            if (res._status  === 0) {
              this.$notify({
                message: '领取0.49元成功',
                duration: 1000,
                background: '#bad12d'
              });
            }else{
              this.$toast({
                message: res._reason,
                position: 'bottom'
              })
            }
          });
      }
    },
    mounted() {
      const btn = document.querySelector('#copy');
      const _this = this
      btn.addEventListener('click',() => {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', window.location.origin + '/?invite_code=' + _this.userInfo.short_code);
        input.select();
        if (document.execCommand('copy')) {
          document.execCommand('copy');
          this.$toast({
            message: "复制成功",
            position: "bottom"
          });
        }
        document.body.removeChild(input);
      })

      this.getUserInfo();
      const code = this.$route.query.invite_code;
      if(code) {
        if(!/^\ww∑{4}$/.test(code)){
            return this.$toast({
                message:`邀请码 ${code} 位数不对噢`
            })
        }
        this.short_code = code;
      }
    }
  };
</script>


<style lang="scss">
    .invite {
        min-height: 100vh;

        .invite_main {
            padding: 82px 10px 10px 10px;
            .top {
            }
            .card-2 {
              margin-top: 18px;
            }
            .g_card {
               background-image: url('../assets/images/bg-text-pattern-winter.png');
               background-repeat: repeat;
               padding: 18px 12px;
               .my-header {
                  font-size: 22px;
                  font-weight: 700;
                  display: inline-block;
                  margin-bottom: 6px;
                  color: #ffc220;
                  border-bottom: 1px #ffc220 solid;
                  padding-bottom: 6px;
                }
                .my-header-2 {
                  font-size: 22px;
                  font-weight: 700;
                  display: inline-block;
                  margin-bottom: 6px;
                  color: #e3eff2;
                  border-bottom: 1px #e3eff2 solid;
                  padding-bottom: 6px;
                }
                .my-header-desc {
                  font-size: 12px;
                  opacity: 0.7;
                  color: #fff;
                }
            }
        }
        .invite_desc {
          color: #FFFFFF;
        }
        .invite_input {
            border: 2px solid #9e9e9e;
            border-radius: 4px;
            width: 100%;
            margin: 10px auto 15px;
            display: block;
            height: 40px;
            line-height: 90px;
            font-size: 20px;
            color: #efefef;
            padding-left: 0.5em;
            background-color: transparent;
        }

        .invite_comfirm {
            color: #fff;
        }

        .my_invite {
            color: #fff;
            .copy {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 18px;
              .invite-result {
                color:#f96868;
                font-weight: 500;
                .invite-number {
                  color: #f44;
                  font-size: 24px;
                  font-weight: 650;
                }
              }
            }
        }

        .code {
            color: #f5a623;
            border: 2px solid #f5a623;
            padding: 10px;
            border-radius: 4px;
            margin-top: 18px;
        }
        .right-button {
        }
        .inst {
          color: #e6e6e694;
          font-size: 14px;
          margin-top: 8px;
          padding-top: 8px;
        }
    }
</style>
